<template>
  <div>
    <el-badge v-for="(item, i) in typeList" :hidden="item.number == 0" :value="item.number" :max="99"
      class="item" :key="i">
      <el-button type="primary" class="ml-30" size="small" @click="openDialog(i)">{{ item.label }}</el-button>

      <listDialog ref="listDialog" :addedService="item" @close="handleDialogClose"></listDialog>
    </el-badge>
  </div>

</template>

<script>
import {
  addedRefuseCount
} from "@/api/system/addedServices";
import listDialog from './listDialog'
import { mapGetters } from 'vuex'

const whileCodeList = ["MAGIC", "FLOWER", "GIANT_PANDA"]

const codeMap = {
  'MAGIC': {
    label: '魔术提醒',
    permission: 'inquiry_magic_notice'
  },
  'FLOWER': {
    label: '鲜花提醒',
    permission: 'inquiry_flower_notice'
  },
}

export default {
  components: {
    listDialog
  },
  data() {
    return {
      typeList: []
    };
  },
  watch: {
    'addedServicesTypeList'() {
      this.setTypeList().then(() => {
        this.getAddedRefuseCount()
      })
    }
  },
  computed: {
    ...mapGetters(["permission", "addedServicesTypeList"]),
  },
  methods: {
    async setTypeList() {
      this.typeList = this.addedServicesTypeList.filter(item => {
        if (!whileCodeList.includes(item.code)) {
          return false
        }

        const obj = codeMap[item.code]
        if (obj) {
          return obj && this.permission[obj.permission]
        } else {
          return true
        }
      }).map(item => {
        const objCopy = {...item}
        return objCopy
      })
    },
    // 获取增值服务待处理数量
    getAddedRefuseCount() {
      addedRefuseCount().then(res => {
        const resData = res.data.data
        if (this.typeList && resData) {
          this.typeList.forEach(item => {
            this.$set(item, 'number', resData[item.code] || 0)
          })
        }
      })
    },
    // 打开弹窗
    openDialog(index) {
      this.$refs.listDialog[index] && this.$refs.listDialog[index].show()
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.getAddedRefuseCount()
      }, 60 * 1000)
    },
    clearTimer() {
      if (this.timer !== null) {
        window.clearInterval(this.timer)
        this.timer = null
      }
    },
    handleDialogClose() {
      this.getAddedRefuseCount()
    }
  },
  activated() {
    this.setTypeList().then(() => {
      this.getAddedRefuseCount()
    })
    this.setTimer()
  },
  deactivated() {
    this.clearTimer()
  }
};
</script>
<style lang="scss" scoped>

</style>